<template>
	<view class="admin-container">
		<!-- 顶部导航菜单 -->
		<view class="admin-tabs">
			<view v-for="tab in tabs" :key="tab.id" class="tab-item" :class="{ active: activeTab === tab.id }"
				@click="switchTab(tab.id)">
				{{ tab.name }}
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="admin-content">
			<!-- 结算管理 -->
			<management-statement ref="managementRef" v-if="activeTab === 'statement'" />
			<!-- 分类管理 -->
			<management-category ref="managementRef" v-if="activeTab === 'category'" />
			<!-- 菜品管理 -->
			<management-dish ref="managementRef" v-if="activeTab === 'dish'" />
			<!-- 套餐管理 -->
			<management-setmeal ref="managementRef" v-if="activeTab === 'setmeal'" />
			<!-- 员工管理 -->
			<management-employee ref="managementRef" v-if="activeTab === 'employee'" />
		</view>
		<view class="float-button-skip" @click="onSkipPage">
			<uni-icons type="undo" size="40" color="#eee"></uni-icons>
		</view>
		<view class="float-button-refresh" @click="onRefresh">
			<uni-icons type="refreshempty" size="40" color="#eee"></uni-icons>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import ManagementEmployee from '../../components/ManagementEmployee.vue';
	import ManagementCategory from '../../components/ManagementCategory.vue';
	import ManagementDish from '../../components/ManagementDish.vue';
	import ManagementSetmeal from '../../components/ManagementSetmeal.vue';
	import ManagementStatement from '../../components/ManagementStatement.vue';
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	// 导航菜单数据
	const tabs = ref([{
			id: 'statement',
			name: '结算管理'
		},
		{
			id: 'category',
			name: '分类管理'
		},
		{
			id: 'dish',
			name: '菜品管理'
		},
		{
			id: 'setmeal',
			name: '套餐管理'
		},
		{
			id: 'employee',
			name: '员工管理'
		}
	]);

	const managementRef = ref(null)
	onReachBottom(() => {
		managementRef.value.showMoreData()
		console.log('触底函数。。');
	})

	const userInfo = wx.getStorageSync('userInfo') || {}
	const onSkipPage = () => {
		wx.navigateTo({
			url: '/pages/employee/employee?job=' + userInfo.job + '&name=' + userInfo.name,
		})
	}

	const onRefresh = () => {
		managementRef.value.getListData(1)
	}

	// 当前激活的标签页
	const activeTab = ref('statement');

	// 切换标签页
	const switchTab = (tabId) => {
		if (userInfo.job === '收银员' && tabId === 'employee') {
			wx.showToast({
				title: '收银员不能进入员工管理页面',
				icon: 'none'
			})
			// activeTab.value = 'statement'
			return
		}
		activeTab.value = tabId;
	};
</script>

<style lang="scss" scoped>
	.admin-container {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.float-button-skip {
			position: fixed;
			right: 80rpx;
			bottom: 300rpx;
			width: 100rpx;
			height: 100rpx;
			background: rgba(0, 0, 0, 0.3);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;

		}

		.float-button-refresh {
			position: fixed;
			right: 80rpx;
			bottom: 120rpx;
			width: 100rpx;
			height: 100rpx;
			background: rgba(0, 0, 0, 0.3);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;

		}
	}

	.admin-tabs {
		display: flex;
		height: 80rpx;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(255, 0, 0, 0.1);
		z-index: 10;
		position: fixed;
		top: 0;
		left: 0;

		.tab-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #666;
			position: relative;

			// 添加分隔线（排除最后一个元素）
			&:not(:last-child)::after {
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 1rpx;
				height: 60%; // 高度设置为60%看起来更美观
				background-color: #e0e0e0; // 浅灰色分隔线
			}

			&.active {
				background-color: #ff5a5f;
				color: #fff;
				font-weight: bold;
				border-radius: 20rpx 20rpx 0 0;

				// 激活状态下的分隔线颜色
				&::after {
					background-color: rgba(255, 255, 255, 0.3); // 半透明白色
				}
			}
		}
	}

	.admin-content {
		flex: 1;
		// overflow: hidden;
		background-color: #f5f5f5;
	}
</style>